<template>
  <div class="home-page">
    <div class="top">
      <div v-for="(item, index) in dataList" :key="index" class="top-item">
        <div class="top-num">{{ item.number }}</div>
        <div>{{ item.name }}</div>
      </div>
    </div>
    <div class="bottom">
      <ScrollTable
        :height="300"
        :dataSource="dataSource"
        :columns="columns"
        :scroll="true"
      >
        <li
          v-for="(item, inx) in dataSource"
          :key="inx"
          :data-key="inx"
          :style="{ height: `50px` }"
        >
          <div v-for="(p, c) in columns" :key="`p${c}`" class="li-item">
            <el-avatar :size="40" :src="item.circleUrl" class="avatar" />
            <div class="data-detail">
              <div class="title">{{ item.title }}</div>
              <div class="time">{{ inx + 1 }}{{ item.time }}</div>
            </div>
          </div>
        </li>
      </ScrollTable>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Welcome"
});
import { ref, reactive } from "vue";
import ScrollTable from "../../components/TableScroll/index.vue";
const dataList = reactive([
  {
    number: 678,
    name: "当前地图数"
  },
  {
    number: 586,
    name: "标记数"
  },
  {
    number: 336,
    name: "访问人数"
  }
]);
const dataSource = [
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "林东东上传了新地图海盗地图",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "朱老师在XXX上传了新地图海盗地图修改了",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "林东东上传了新地图海盗地图",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "朱老师在XXX上传了新地图海盗地图修改了",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "林东东上传了新地图海盗地图",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "朱老师在XXX上传了新地图海盗地图修改了",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "林东东上传了新地图海盗地图",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "朱老师在XXX上传了新地图海盗地图修改了",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "林东东上传了新地图海盗地图",
    time: "分钟前"
  },
  {
    circleUrl:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    title: "朱老师在XXX上传了新地图海盗地图修改了",
    time: "分钟前"
  }
];

const columns = [
  {
    title: "动态",
    dataIndex: "name",
    width: 600,
    key: "name"
  }
];
</script>

<style lang="scss" scoped>
.home-page {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .top {
    flex: 0 0 240px;
    padding-top: 40px;
    margin: 20px 0;
    font-weight: 600;
    display: flex;
    justify-content: space-around;
    .top-item {
      text-align: center;
      .top-num {
        margin-bottom: 20px;
      }
    }
  }
  .bottom {
    flex: 1;
  }
}
.li-item {
  display: flex;
  margin: 10px 0;
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分用"..."代替 */
}

.data-detail {
  margin-left: 10px;
  display: flex;
  justify-content: start;
  flex-direction: column;
  .title {
    font-size: 16px;
  }
  .time {
    color: #7e7e7e;
    font-size: 14px;
  }
}
li {
  list-style: none;
  position: relative;
  cursor: pointer;
  display: flex;
  padding: 8px 0;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
}
li:hover {
  background: rgba(239, 243, 245, 0.52);
}
</style>
